// 当侧边栏收起时
.f-sidebar-parent-collapse {
    overflow: hidden;
}

// 背景
.f-sidebar-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: $f-sidebar-overlay-zindex;
    background: $f-mask-bg;
    transition: opacity $f-sidebar-transition-time;

    &.f-sidebar-show {
        transform: translate3d(0, 0, 0);
    }

    &.f-sidebar-collapse {
        margin-left: -1px;
        transform: translate3d(-100%, 0, 0);
    }
}

.f-sidebar-slide .f-sidebar-main {
    transition: transform $f-sidebar-transition-time;
}

// 主内容区
.f-sidebar-main {
    position: absolute;
    z-index: #{$f-sidebar-overlay-zindex + 50};
    width: $f-sidebar-main-width;
    background: $f-sidebar-main-bg;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    // 表单
    .f-page-header-base {
        border-bottom: $f-sidebar-header-border-width dashed $f-sidebar-header-border-color !important;
    }

    // 头部区域
    .f-sidebar-header-ctr {
        height: $f-sidebar-header-height !important;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-shrink: 0;
        border-bottom: $f-sidebar-header-border-width dashed $f-sidebar-header-border-color !important;
        padding: $f-sidebar-header-inner-gutter;

        .f-sidebar-header-title {
            flex: 1 1 auto;
            margin: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: $f-sidebar-header-title-font-size;
            color: $f-sidebar-header-title-text;
        }
    }

    .f-sidebar-header {
        height: $f-sidebar-header-height !important;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-shrink: 0;
        border-bottom: $f-sidebar-header-border-width dashed $f-sidebar-header-border-color !important;
        padding: $f-sidebar-header-inner-gutter;

        .f-title {
            flex: 1 1 auto;
            margin: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: $f-sidebar-header-title-text;

            h5,
            .f-title-text {
                font-size: $f-sidebar-header-title-font-size;
                margin: 0;
            }
        }

        .f-toolbar {
            padding-right: 0 !important;
        }

        .f-response-toolbar {
            width: 100%;
        }

    }

    .f-sidebar-close {
        width: $f-sidebar-icon-close-width;
        height: $f-sidebar-icon-close-height;
        font-size: $f-sidebar-icon-close-size;
        color: $f-sidebar-icon-close-color;
        font-family: 'FarrisIcons';
        margin-left: 0.75rem;
        cursor: pointer;

        &:hover {
            color: $f-theme-05;
        }

        &:focus {
            color: $f-theme-01 ;
        }
    }

    // 内容区域
    .f-sidebar-content {
        flex: 1 1 auto;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        position: relative;
        padding: $f-sidebar-content-inner-gutter
    }

    .f-sidebar-footer,
    .fe-modal-footer-wrapper .fe-modal-footer-base {
        height: $f-sidebar-footer-height;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        flex-shrink: 0;
        padding: $f-sidebar-footer-inner-gutter;
        background: $f-sidebar-footer-bg;
        box-shadow: $f-sidebar-footer-box-shadow;
        border-radius: $f-sidebar-footer-border-radius;
        box-sizing: content-box;

        >.btn {
            @include f-footer-btn($f-sidebar-footer-btn-font-size, $f-sidebar-footer-btn-inner-gutter-y, $f-sidebar-footer-btn-inner-gutter-x);
        }

        .f-btn-ml {
            margin-left: $f-sidebar-footer-btn-outer-gutter !important;
        }
    }

    .f-sidebar-footer .f-btn-mr {
        margin-right: $f-sidebar-footer-btn-outer-gutter;
    }
}

// 左侧
.f-sidebar-pos-left {
    .f-sidebar-main {
        top: 0;
        bottom: 0;
        left: 0;
        border-radius: 0 $f-sidebar-main-border-raidus $f-sidebar-main-border-raidus 0;
        box-shadow: $f-sidebar-main-shadow !important;
    }

    .f-sidebar-entry-ctr {
        left: 0;
        border-radius: $f-sidebar-entry-ctr-pos-left-border-radius;
    }

    &.f-sidebar-show {
        .f-sidebar-main {
            transform: translate3d(0, 0, 0);
        }

        .f-sidebar-entry-ctr {
            opacity: 0;
        }
    }

    &.f-sidebar-collapse {
        .f-sidebar-main {
            transform: translate3d(-100%, 0, 0);
        }

        .f-sidebar-entry-ctr {
            opacity: 1;
        }
    }
}

.f-cmp-sidebar.f-sidebar-collapse {
    .f-sidebar-main {
        box-shadow: none !important;
    }
}

// 右侧
.f-sidebar-pos-right {
    .f-sidebar-main {
        top: 0;
        bottom: 0;
        right: 0;
        border-radius: $f-sidebar-main-border-raidus 0 0 $f-sidebar-main-border-raidus;
        box-shadow: $f-sidebar-main-shadow-position-right !important;
    }

    .f-sidebar-entry-ctr {
        right: 0;
        left: auto;
        border-radius: $f-sidebar-entry-ctr-pos-right-border-radius;

        .f-sidebar-entry::before {
            content: $f-sidebar-icon-close-icon;
        }
    }

    &.f-sidebar-show {
        .f-sidebar-main {
            transform: translate3d(0, 0, 0);
        }

        .f-sidebar-entry-ctr {
            opacity: 0;
        }
    }

    &.f-sidebar-collapse {
        .f-sidebar-main {
            transform: translate3d(100%, 0, 0);
        }

        .f-sidebar-entry-ctr {
            opacity: 1;
        }
    }
}

// 底部
.f-sidebar-pos-bottom {
    .f-sidebar-main {
        width: auto;
        height: 31rem;
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        border-radius: $f-sidebar-main-border-raidus $f-sidebar-main-border-raidus 0 0;
        box-shadow: $f-sidebar-main-shadow-position-bottom !important;
    }

    .f-sidebar-entry-icon {
        transform: rotate(90deg);
    }

    .f-sidebar-entry-ctr {
        left: 50%;
        top: auto;
        bottom: 0;
        right: auto;
    }

    &.f-sidebar-show .f-sidebar-main {
        transform: translate3d(0, 0, 0)
    }

    &.f-sidebar-collapse .f-sidebar-main {
        transform: translate3d(0, 100%, 0)
    }
}

// 顶部
.f-sidebar-pos-top {
    .f-sidebar-main {
        width: auto;
        height: 31rem;
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        border-radius: 0 0 $f-sidebar-main-border-raidus $f-sidebar-main-border-raidus;
        box-shadow: $f-sidebar-main-shadow-position-top !important;
    }

    .f-sidebar-entry-icon {
        transform: rotate(-90deg);
    }

    .f-sidebar-entry-ctr {
        left: 50%;
        top: 0;
        bottom: auto;
        right: auto;
    }

    &.f-sidebar-show .f-sidebar-main {
        transform: translate3d(0, 0, 0)
    }

    &.f-sidebar-collapse .f-sidebar-main {
        transform: translate3d(0, -100%, 0)
    }
}

/*収折图标*/
.f-sidebar-entry-icon {
    width: $f-sidebar-entry-icon-width;
    height: $f-sidebar-entry-icon-height;
    background: $f-sidebar-entry-icon-bg;
    color: $f-sidebar-entry-icon-color;
    box-shadow: $f-sidebar-entry-icon-shadow;
    text-align: center;
    cursor: pointer;

    .f-icon {
        font-size: $f-sidebar-entry-icon-size;
        line-height: $f-sidebar-entry-icon-height;
    }

    &:hover {
        opacity: 0.8;
    }
}

.f-sidebar-entry-ctr {
    position: absolute;
    top: $f-sidebar-entry-icon-top-position;
    z-index: #{$f-sidebar-overlay-zindex + 50};
    transition: transform #{$f-sidebar-transition-time * 2};
}

/*弹出窗口中的侧边栏呈现*/
.f-sidebar-main {
    .f-sidebar--action-list {
        position: absolute;
        top: 0;
        right: 14px;
        min-height: $f-pt-header-base-height;
        @include f-header-flex;
        padding: $farris-ptlayout-header-inner-gutter;
        padding-left: 0;
        padding-right: 0;
        z-index: 100;

        .action-list--icon {
            border-radius: 6px;
            text-align: center;
            display: block;
            background: #fff;
            cursor: pointer;
            transition: transform linear 0.2s;
            display: flex;
            align-items: center;
            text-align: center;
            height: #{$farris-btn-font-size * $farris-input-btn-line-height}+#{ $farris-input-btn-padding-y * 2}+0.125rem;

            &:hover {
                transform: rotate(180deg);
            }

            .f-icon {
                line-height: 1;
                margin: 0 auto;
                font-size: 20px;
            }
        }
    }
}

// 侧边栏
.fe-page-sidebar .f-sidebar-main {
    z-index: 1050;
}

.animated-none {
    transition: none;
}

/*弹出窗口标题显示间距*/
.f-sidebar-main--has-actions .f-page-header .f-page-header-base {
    padding-right: 50px;
}

// 覆盖侧边栏组合的单据页面样式
.f-sidebar-main {
    .f-page {
        background: #fff;

        .f-page-header,
        .f-pt-header,
        .farris-header {
            box-shadow: none !important;
            margin: 0 !important;
        }

        .f-page-main {
            box-shadow: none !important;

            .f-struct-like-card {
                box-shadow: none;
            }
        }

        .f-page-footer {
            background: $f-sidebar-footer-bg;
            box-shadow: $f-sidebar-footer-box-shadow;
        }
    }
}